<!DOCTYPE html>
<html lang="en">

<html>
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="../css/employee.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="classInfo" style="height: 100%">
    <main>
        <div class="main-center">

            <div class="submit">
                <el-row>
                    <el-button type="warning" @click="dialogVisible = true,title = '新增分类'">+新增分类</el-button>

                </el-row>
                <!--                    <input type="button" value="+新增员工" id="add" @click="add">-->
                <!--                    <input type="button" value="-删除员工" id="del">-->
            </div>
            <div class="table">
                <template>
                    <el-table
                            ref="multipleTable"
                            :data="classInfos"
                            tooltip-effect="dark"
                            style="width: 100%"
                    >
                        <el-table-column
                                prop="typesName"
                                label="分类名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="分类类型"
                                align="center">
                            <template slot-scope="scope">{{ scope.row.types }}</template>
                        </el-table-column>
                        <el-table-column
                                prop="updateTime"
                                label="操作时间"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="order"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-link>
                                <span style="padding: 3px">&nbsp;</span>
                                <el-link type="danger" @click="handleDelete(scope.$index, scope.row)">
                                    删除
                                </el-link>
                            </template>

                        </el-table-column>
                    </el-table>

                </template>
            </div>

        </div>
        <div class="page-info">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageTool.pageNo"
                    :page-sizes="[5,10]"
                    :page-size="pageTool.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTool.pageTotal">
            </el-pagination>
        </div>
    </main>
<!--            添加-->
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="classInfoForm" label-width="100px">
            <el-form-item label="分类名称">
                <el-input v-model.trim="classInfoForm.typesName"></el-input>
            </el-form-item>
            <el-form-item label="分类类型">
                <el-select v-model="classInfoForm.types" placeholder="请选择分类类型">
                    <el-option label="菜品分类" value="菜品分类"></el-option>
                    <el-option label="套餐分类" value="套餐分类"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button
                        @click="dialogVisible = false,
                        Object.keys(this.classInfoForm).forEach(keys => (this.classInfoForm[keys] = ''));">取 消
                </el-button>
                <el-button type="primary" @click="uri == 'put'?update():onsubmit()">确 定</el-button>
            </span>
    </el-dialog>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var classInfo = new Vue({
        el: "#classInfo",
        data: {
            dialogVisible:false,
            title:'',
            classInfos: [],
            classInfoForm:{
                typesName: '',
                types:"",
            },
            test: "修改套餐",
            uri: "",
            pageTool: {
                pageTotal: 1,
                pageSize: 5,
                pageNo: 1,
            },
            messageStyle:{
                message:'',
                offset:80,
            },
        },
        methods: {



            //页码变化
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageTool.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageTool.pageNo = val;
                this.selectAll();
            },

            update(){
                axios.put("/basis/classInfo",this.classInfoForm)
                    .then(res =>{
                        this.messageStyle.message = res.data.message;
                        if (res.data.code == 20031){
                            this.$message.success(this.messageStyle);
                        }else{
                            this.$message.warning(this.messageStyle);
                        }
                        this.selectAll();
                        Object.keys(this.classInfoForm).forEach(keys => this.classInfoForm[keys] = '');
                    })
                    .catch(err =>{
                        this.messageStyle.message = "404 系统出错！！！"
                        this.$message.error(this.messageStyle);
                    })
                this.dialogVisible = false
                this.uri = '';
            },
            //修改
            handleEdit(index,row){
                this.uri = 'put';
                this.title = "修改分类";
                this.classInfoForm = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },

            //删除

            handleDelete(index,row){
                axios.delete(`/basis/classInfo/${row.order}`)
                    .then(res => {
                        this.messageStyle.message = res.data.message;
                        if (res.data.code == 20021){
                            this.$message.success(this.messageStyle);
                        }else {
                            this.$message.error(this.messageStyle);
                        }
                        this.selectAll();
                    })
                    .catch(err =>{
                        this.messageStyle.message = "404 系统错误"
                        this.$message.error(this.messageStyle);
                    })
            },

            selectAll() {

                that = this;
                axios.get('/basis/classInfo',{
                    params: {
                        pageNo: this.pageTool.pageNo,
                        pageSize: this.pageTool.pageSize,
                        name: null,
                    }
                })
                    .then(res => {
                        if (res.data.code == 20041){
                            this.classInfos = res.data.data.records;
                            this.pageTool.pageTotal = res.data.data.total;
                        }else {
                            this.messageStyle.message = "系统错误，请稍后再试！！！"
                            this.$message.error(this.messageStyle);
                        }
                    })
                    .catch(err => {
                        // console.error(err);
                    })
            },

            onsubmit() {
               axios.post("/basis/classInfo",this.classInfoForm)
                   .then(res =>{
                       this.messageStyle.message = res.data.message;
                       if(res.data.code == 20011){
                           this.$message.success(this.messageStyle);
                       }else {
                           this.$message.warning(this.messageStyle);
                       }
                       this.dialogVisible = false;
                       Object.keys(this.classInfoForm).forEach(keys => this.classInfoForm[keys] = '');
                       this.selectAll();
                   })
                   .catch(err =>{

                   })
            },



            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        Object.keys(this.classInfoForm).forEach(keys => (this.classInfoForm[keys] = ''))
                        done();
                    })
                    .catch(_ => {});
            },
        },
        mounted() {
            this.selectAll();
        },
    })
</script>

</html>